<template>
  <div class="container">
    <img class="icon" src="~@/assets/img/header/icon.png" alt />
    <span class="xtmc">通用能力共享系统</span>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#409EFF"
        mode="horizontal"
        @select="handleSelect"
      >
        <template v-for="item in menuList">
          <el-menu-item v-if="item.show" :index="item.path" :key="item.path">
            <div class="menu-style">{{ item.name }}</div>
          </el-menu-item>
        </template>
        <template v-for="item in systemList">
          <el-submenu :key="item.name" :index="item.path">
            <template slot="title">{{item.name}}</template>
            <div class="submenu-contetn">
              <el-menu-item :index="obj.path" v-for="obj in item.children" :key="obj.name">
                <div>{{obj.name}}</div>
              </el-menu-item>
            </div>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <div class="user-name">
      <img src="~@/assets/img/header/avator.png" alt />
      <span>您好,{{ this.$store.state.personInfo.mc }}</span>
    </div>
    <i class="el-icon-switch-button logout" @click="logOut">退出</i>
    <!-- <el-dropdown @command="handleCommand">
      <span class="menu-grzx">个人中心</span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          :command="item.path"
          v-for="item in menuList"
          :key="item.path"
        >
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      menuList: [
        // { name: '通用能力大厅概览', path: '/adminMainpage' },
        { name: "能力大厅", path: "/mainpage", show: true },
        { name: "能力看板", path: "/nlkb", show: true },
        { name: "能力管理", path: "/nlgl", show: true },
        { name: "个人中心", path: "/grzx", show: true },
        // { name: '通用能力授权申请/我的申请', path: '/wdsq', show: true },
        // { name: '能力授权/我的审批', path: '/wdqx', show: false },
        // { name: '我的发布', path: '/wdfb', show: false },
        // { name: '认证鉴权', path: '/aqrz', show: true },
        // { name: '服务编排', path: '/fwlcbp', show: true },
        // { name: '服务订阅', path: '/fwdy', show: true },
        // { name: '操作日志/系统管理', path: '/czrz', show: true },
        // { name: '退出', path: 'back' },
      ],
      systemList: [],
      activeIndex: "/mainpage",
    };
  },
  watch: {
    "$route.path": {
      handler(path) {
        // // 如果菜单中包含该路由，则激活当前菜单
        const flag = this.menuList.some((item) => item.path === path);
        if (flag) {
          this.activeIndex = path;
        } else if (
          path === "/grzx/wdsq" ||
          path === "/grzx/wdqx" ||
          path === "/grzx/fwdy" ||
          path === "/grzx/cygjx"
          // path === "/nlsq"
        ) {
          this.activeIndex = "/grzx";
        } else if (
          path === "/nlgl/wdfb" ||
          path === "/nlgl/fwlcbp" ||
          path === "/nlgl/adminMainpage" ||
          path === "/nlgl/aqrz"
          // path === "/nlfb"
        ) {
          this.activeIndex = "/nlgl/wdfb";
        } else if (
          path === "/xtgl/cdqx" ||
          path === "/xtgl/yhqx" ||
          path === "/xtgl/zzjg" ||
          path === "/xtgl/czrz"
          // path === "/nlfb"
        ) {
          this.activeIndex = path;
        } else {
          this.activeIndex = this.menuList[0].path;
        }
      },
      immediate: true,
    },
    $route: {
      handler(to) {
        if (to.path.includes("/nlxq")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/zxts")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/signGuide")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/nlsq")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/nlfb")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/fwbp")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }

        if (to.path.includes("/csts")) {
          this.activeIndex = this.breadCrumbInfo[0].path;
          return
        }
      },
      immediate: true
    }
  },
  mounted() {
    // 管理员
    this.adminAddMenu();
    this.isAuth();
  },
  methods: {
    /* 管理员添加通用能力大厅概览菜单 */
    adminAddMenu() {
      if (this.$store.state.personInfo.rybm.indexOf('A000') >= 0) {
        // this.menuList.unshift({
        //   name: '通用能力大厅概览',
        //   path: '/adminMainpage',
        // })
        this.menuList.forEach(item => {
          if (item.name === '能力管理') {
            item.path = '/nlgl/wdfb'
          }
        })

        this.systemList.push({
          name: "系统管理",
          path: "/xtgl",
          children: [
            {
              name: '菜单权限',
              path: '/xtgl/cdqx',

            },
            {
              name: '用户权限',
              path: '/xtgl/yhqx',
            },
            {
              name: '组织机构',
              path: '/xtgl/zzjg',
            },
            {
              name: '操作日志',
              path: '/xtgl/czrz',
            },
          ],
          show: false,
        });

      } else {
        this.menuList.forEach(item => {
          if (item.name === '能力管理') {
            item.path = '/nlgl/fwlcbp'
          }
        })
      }
    },
    /* 跳转路由 */
    handleSelect(path) {
      if (path === this.activeIndex) return
      this.$router.push(path);
    },
    /* 退出登陆 */
    logOut() {
      this.$confirm("确认退出登录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/");
        })
        .catch(() => { });
    },
    isAuth() {
      if (this.$store.state.personInfo.rybm.indexOf("A000") >= 0) {
        this.menuList.forEach((item) => {
          item.show = true;
        });
      }
    },
  },
  computed: {
    ...mapState(['breadCrumbInfo'])
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.2);
  line-height: 100px;
  .icon {
    margin: 0 15px 0 30px;
  }
  .xtmc {
    font-size: 42px;
    letter-spacing: 2px;
    color: #ffffff;
    margin-right: 30px;
  }

  .menu {
    flex: 1;
    width: 0;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
      color: #fff !important;
      font-weight: 400 !important;
      border-bottom: none;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 70%;
        height: 2px;
        background-color: #2edbff;
        bottom: 0;
        left: 16%;
      }
    }

    ::v-deep .el-menu--horizontal > .el-menu-item {
      border-bottom: none;
      color: #a6d8ff !important;
    }

    ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
      font-size: 22px;
      color: #a6d8ff !important;
    }

    ::v-deep .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
      color: #fff !important;
      font-weight: 400 !important;
      border-bottom: none;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 75%;
        height: 2px;
        background-color: #2edbff;
        bottom: 0;
        left: 10%;
      }
    }
  }
  ::v-deep .el-menu.el-menu--horizontal {
    border-bottom: none;
    & > .el-menu-item.is-active {
      background-color: transparent !important;
      font-weight: 700;
    }
    & > .el-menu-item:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    & > .el-submenu:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }

  ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
    background-color: transparent !important;
  }

  .logout {
    color: #ffffff;
    cursor: pointer;
    margin-right: 30px;
    font-size: 16px;
  }
  .logout:hover {
    color: #409eff;
  }

  .user-name {
    margin-right: 60px;
    font-size: 16px;
    color: #ffffff;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
  // ::v-deep .el-dropdown {
  //   float: right;
  //   margin-right: 30px;
  //   height: 60px;
  // }
  // .menu-grzx {
  //   font-size: 20px;
  //   color: #fff;
  // }
  .menu-style {
    font-size: 22px !important;
  }
}
</style>

<style lang="scss">
.submenu-contetn {
  background-color: #1b5ab9;
}
</style>
